<template>
  <div>
    <table>
      <caption>欢迎光临_vue开发的收银系统_水果店</caption>
      <tr>
        <th>{{ discount }}</th>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input type="text" v-model="num"></td>
      </tr>
      <tr>
        <td><button @click="btn">结账买单~</button></td>
      </tr>
      <tr>
        <td><button>结账单：总价{{sum}}￥元 折后价:{{count}}￥元 省了:{{province}}￥元</button></td>
      </tr>
    </table>

  </div>
</template>

<script>
export default {
  data(){
    return {
      discount:'苹果 10￥/斤,折扣<8折>',
      num:'',
      sum:'',
      count:'',
      province:''
    }
  },
  methods:{
    btn(){
      this.sum = this.num*10,
      this.count = this.num*10*0.8,
      this.province = this.sum-this.count
    }
  }
}
</script>

<style>
table{
  width: 500px;
  border:1px solid #000000
}
th,td {
    border: 1px solid #000000;
    text-align: center;
}
</style>